<template>
  <tm-app color="#F4E0B2">
    <tm-tabs :list="tabsTitle" :width="900" :itemWidth="187" :itemHeight="96" default-name="1" color="#e6cfa3"
             activeFontColor="#6C3619" unSelectedColor="rgb(108 54 25 / 70%)" @change="(key) => tabFlag = key"></tm-tabs>
    <!--喂食-->

    <view v-if="tabFlag === '1'">
      <view v-if="dataObj.feedingList?.length>0">
        <view v-for="(item ,index) in dataObj.feedingList" :key="index" class="item-box">


          <tm-text :label="item.createTime" color="#6C3619" :fontSize="24"/>
          <view class="flex-row flex flex-wrap">
            <tm-tag color="rgba(108, 54, 25, 0.7)" v-for="(mx ,x ) in item.content.foods " size="xs" :label="mx.name"/>

          </view>
          <tm-button v-if="item.video" label="喂食视频" color="#e2ceac" fontColor="#6C3619"
                     :fontSize="20" :round="10" :width="126" :height="40" style="font-weight: bold;"
                     @click="btnClick(item)"/>
        </view>
      </view>

    </view>
    <!-- 健康 -->
    <view v-if="tabFlag === '2'">
      <view v-if="dataObj.treatList?.length>0">


        <view v-for="(item, index)  in dataObj.treatList" :key="index" class="item-box">
          <view class="flex-row flex flex-wrap flex-between pa-12">

            <tm-text :label="'农管家: '+item.staffName" color="#6C3619"/>
            <tm-text :label="item.completeTime" color="#6C3619"/>


          </view>
          <view class="pa-12">
            <tm-text :label=" '对猪猪进行了 ['+ item.content+']体检'" color="#6C3619"/>
          </view>


        </view>


      </view>
      <view v-else class="flex flex-center fulled flex-col flex-col-center-center" style="height: 930rpx">
        <tm-image src="@/static/Group.png" :width="320" :height="320"></tm-image>
        <tm-text label="暂无记录" :fontSize="24" color="rgb(108 54 25 / 60%)" class="mb-34"></tm-text>
      </view>
    </view>

    <!-- 运动 -->
    <view v-if="tabFlag === '3'">
      <view v-if="dataObj.stepWarmList?.length>0">

        <view v-for="(item ,index) in dataObj.stepWarmList" :key="index" class=" item-box ">
          <view class="flex flex-between flex-row">

            <tm-text :label="item.date" color="#6C3619"/>
            <tm-text :label="item.step +'步'" color="#6C3619"/>
          </view>
        </view>

      </view>

    </view>

    <!-- 温度 -->
    <view v-if="tabFlag === '4'">
      <view v-if="dataObj.stepWarmList?.length>0">


        <view v-for="(item , index ) in dataObj.stepWarmList" :key="index" class=" item-box ">
          <view class="flex flex-between flex-row">

            <tm-text :label="item.date" color="#6C3619"/>
            <tm-text :label="item.warm" color="#6C3619"/>
          </view>
        </view>
        >

      </view>

    </view>


    <tm-modal v-model:show="showWin" color="#FBEEC4" :round="0" closeable hideCancel _class="pa-0 ma-0">
      <video id="myVideo" style="height:160px;width: 100%;" :src="videoUrl" autoplay></video>
      <template v-slot:button>
        <view style="height:0"></view>
      </template>
    </tm-modal>


  </tm-app>
</template>

<script setup lang="ts">
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue"
import {getSharePig} from '@/apis'

const tabsTitle = [
  {key: '1', title: '喂食记录'},
  {key: '2', title: '健康防疫'},
  {key: '3', title: '运动记录'},
  {key: '4', title: '温度记录'}
]


const code = ref<string>('')

const tabFlag = ref('1')
const dataObj = ref({})
const videoUrl = ref('')
const showWin = ref(false)

const onLoadList = async (code: string) => {

  const {data} = await getSharePig(code)
  console.log("获取的数据：", data)
  dataObj.value = data
  await uni.setNavigationBarTitle({title: `${data.pig.nickName}认养的${data.pig.name}`});
}

onLoad((options) => {
  code.value = options?.code
  onLoadList(code.value)
})


const btnClick = (item) => {
  showWin.value = true
  videoUrl.value = item.video
}
</script>


<style lang="less" scoped>
.item-box {

  box-sizing: border-box;
  border-radius: 8rpx;
  padding: 24rpx 12rpx;
  width: 96%;
  background: #FFF4D1;
  margin: 10rpx auto;
}
</style>